{% extends 'base.html' %}
{% load static %}

{% block title %}告警管理 - Allen监控系统{% endblock %}

{% block extra_css %}
<link href="{% static 'css/dataTables.bootstrap5.min.css' %}" rel="stylesheet">
<style>
    .alert-critical { background-color: #ffe6e6; }
    .alert-warning { background-color: #fff3e6; }
    .alert-info { background-color: #e6f3ff; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>告警管理</h2>
        <div>
            <button class="btn btn-success me-2" id="acknowledgeSelected">
                <i class="fas fa-check"></i> 确认选中
            </button>
            <button class="btn btn-danger" id="clearSelected">
                <i class="fas fa-trash"></i> 清除选中
            </button>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-2">
                    <select name="level" class="form-select">
                        <option value="">所有级别</option>
                        {% for level_value, level_name in alert_levels %}
                        <option value="{{ level_value }}" {% if selected_level == level_value %}selected{% endif %}>
                            {{ level_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">所有状态</option>
                        {% for status_value, status_name in alert_statuses %}
                        <option value="{{ status_value }}" {% if selected_status == status_value %}selected{% endif %}>
                            {{ status_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="text" name="search" class="form-control" placeholder="搜索设备名称/告警内容" 
                           value="{{ search_query|default:'' }}">
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">筛选</button>
                    <a href="{% url 'alerts' %}" class="btn btn-secondary">重置</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 告警列表 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="alertsTable">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th>时间</th>
                            <th>设备</th>
                            <th>级别</th>
                            <th>告警内容</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for alert in alerts %}
                        <tr class="alert-{{ alert.level }}">
                            <td>
                                <input type="checkbox" class="form-check-input alert-checkbox" value="{{ alert.id }}">
                            </td>
                            <td>{{ alert.created_at|date:"Y-m-d H:i:s" }}</td>
                            <td>{{ alert.device.name }}</td>
                            <td>
                                <span class="badge {% if alert.level == 'critical' %}bg-danger
                                                  {% elif alert.level == 'warning' %}bg-warning
                                                  {% else %}bg-info{% endif %}">
                                    {{ alert.get_level_display }}
                                </span>
                            </td>
                            <td>{{ alert.message }}</td>
                            <td>
                                <span class="badge {% if alert.status == 'active' %}bg-danger
                                                  {% elif alert.status == 'acknowledged' %}bg-warning
                                                  {% else %}bg-success{% endif %}">
                                    {{ alert.get_status_display }}
                                </span>
                            </td>
                            <td>
                                {% if alert.status == 'active' %}
                                <button class="btn btn-sm btn-success acknowledge-btn" data-alert-id="{{ alert.id }}">
                                    <i class="fas fa-check"></i> 确认
                                </button>
                                {% endif %}
                                <button class="btn btn-sm btn-danger clear-btn" data-alert-id="{{ alert.id }}">
                                    <i class="fas fa-trash"></i> 清除
                                </button>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center">暂无告警信息</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            {% if alerts.has_other_pages %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if alerts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1">&laquo; 首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ alerts.previous_page_number }}">上一页</a>
                    </li>
                    {% endif %}

                    {% for num in alerts.paginator.page_range %}
                    {% if alerts.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > alerts.number|add:'-3' and num < alerts.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                    {% endif %}
                    {% endfor %}

                    {% if alerts.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ alerts.next_page_number }}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ alerts.paginator.num_pages }}">末页 &raquo;</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap5.min.js' %}"></script>
<script>
$(document).ready(function() {
    // 全选/取消全选
    $('#selectAll').change(function() {
        $('.alert-checkbox').prop('checked', $(this).prop('checked'));
    });

    // 单个确认按钮
    $('.acknowledge-btn').click(function() {
        const alertId = $(this).data('alert-id');
        acknowledgeAlerts([alertId]);
    });

    // 单个清除按钮
    $('.clear-btn').click(function() {
        const alertId = $(this).data('alert-id');
        clearAlerts([alertId]);
    });

    // 批量确认按钮
    $('#acknowledgeSelected').click(function() {
        const selectedIds = getSelectedAlertIds();
        if (selectedIds.length > 0) {
            acknowledgeAlerts(selectedIds);
        } else {
            alert('请选择要确认的告警');
        }
    });

    // 批量清除按钮
    $('#clearSelected').click(function() {
        const selectedIds = getSelectedAlertIds();
        if (selectedIds.length > 0) {
            clearAlerts(selectedIds);
        } else {
            alert('请选择要清除的告警');
        }
    });

    // 获取选中的告警ID
    function getSelectedAlertIds() {
        return $('.alert-checkbox:checked').map(function() {
            return $(this).val();
        }).get();
    }

    // 确认告警
    function acknowledgeAlerts(alertIds) {
        $.ajax({
            url: '{% url "acknowledge_alerts" %}',
            type: 'POST',
            data: {
                alert_ids: alertIds,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.status === 'success') {
                    location.reload();
                } else {
                    alert('操作失败：' + response.message);
                }
            },
            error: function() {
                alert('操作失败，请重试');
            }
        });
    }

    // 清除告警
    function clearAlerts(alertIds) {
        if (confirm('确定要清除选中的告警吗？')) {
            $.ajax({
                url: '{% url "clear_alerts" %}',
                type: 'POST',
                data: {
                    alert_ids: alertIds,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    if (response.status === 'success') {
                        location.reload();
                    } else {
                        alert('操作失败：' + response.message);
                    }
                },
                error: function() {
                    alert('操作失败，请重试');
                }
            });
        }
    }
});
</script>
{% endblock %} 